<!--  -->
<template>
  <div class="size-full">
    <div class="size-full" ref="ChartLeft1"></div>
    <DialogBox
      :title="boxTitle"
      :show="showDialog"
      @close="showDialog = false"
      @opened="initDetail"
    >
      <transition enter-active-class="animate__animated animate__fadeInRight">
        <div v-if="!showTable" class="size-full">
          <div class="flex justify-end">
            <button class="gl-normal-button px-2 py-1" @click="initTableData(true)">
              项目清单 <el-icon><ArrowRight /></el-icon>
            </button>
          </div>
          <div ref="detailChartLeft1" class="h-[522px]"></div>
        </div>
      </transition>
      <transition enter-active-class="animate__animated animate__fadeInLeft ">
        <div v-if="showTable" class="size-full">
          <div class="grid-cols-12 grid gap-2">
            <button class="gl-normal-button px-2 py-1" @click="initTableData(false)">
              <el-icon><ArrowLeft /></el-icon> 上一级
            </button>
            <TimeSelector
              :show-page="false"
              :length="getYearLength"
              class="col-span-11 justify-end"
              @change="initTableApi"
            ></TimeSelector>
          </div>
          <div class="mt-[22px] h-[492px]">
            <el-table
              :data="tableData"
              stripe
              max-height="495px"
              height="495px"
              style="width: 100%"
              class="table"
            >
              <el-table-column prop="business" label="建设单位" />
              <el-table-column prop="projectName" label="项目名称" />
              <el-table-column prop="amount" label="项目金额(万元)" width="120" />
              <el-table-column prop="step" label="项目进度" width="400">
                <template #header>
                  <div class="">
                    <div>项目进度</div>
                    <div class="flex text-xs">
                      <div
                        v-for="(item, index) in stepPoint"
                        :key="index"
                        class="flex justify-center items-center"
                      >
                        <div
                          class="text-white/50"
                          :style="{
                            padding: index == 2 ? '0 1.4rem' : index == 3 ? '0 0.7rem' : ''
                          }"
                        >
                          {{ item }}
                        </div>
                        <el-icon v-if="index != stepPoint.length - 1"><ArrowRightBold /></el-icon>
                      </div>
                    </div>
                  </div>
                </template>
                <template #default="scope">
                  <div class="grid grid-cols-4 relative">
                    <div
                      v-for="(item, index) in stepPoint"
                      :key="index"
                      :class="scope.row.step - 1 == index ? 'text-[#65e6fe]' : 'text-[#577284]'"
                      class="z-10 relative flex flex-col items-center"
                    >
                      <div class="text-sm"></div>
                      <div
                        class="step-pot border-solid border-2"
                        :class="scope.row.step - 1 < index ? 'border-gray-600' : 'border-white'"
                      ></div>
                    </div>
                    <div
                      class="absolute z-0 w-[75%] left-[50px] h-2 bg-white/20 bottom-[1px] bg-gradient-to-r from-cyan-500 to-blue-500"
                      :style="{ width: (scope.row.step - 1) * 25 + '%' }"
                    ></div>
                    <div class="absolute w-[75%] left-[50px] h-2 bg-white/20 bottom-[1px]"></div>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <!-- <div class="mt-3 justify-end flex">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="totals"
                size="small"
                style="
                  --el-pagination-button-bg-color: transparent;
                  --el-disabled-bg-color: transparent;
                "
              />
            </div> -->
          </div>
        </div>
      </transition>
    </DialogBox>
  </div>
</template>

<script setup lang="ts">
import DialogBox from '@/components/box/DialogBox.vue'
import type { mountLetters } from '@/types/baseTypes'
import { defaultTooltipStyle, useEcharts } from '@/util/e-chart'
import { ArrowLeft, ArrowRight, ArrowRightBold } from '@element-plus/icons-vue'
import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts'
import { groupBy } from 'lodash'
import moment from 'moment'
import { computed, onMounted, ref } from 'vue'
import totalData from './components/chart1data.json'
import TimeSelector from './components/TimeSelector.vue'
const boxTitle = ref<'年度项目投资情况' | '投资项目清单'>('年度项目投资情况')
const showDialog = ref(false)

const ChartLeft1 = ref<HTMLElement>()
const stepPoint = ['立项用地规划许可', '工程建设许可', '施工许可', '竣工验收']
const initMainChart = () => {
  // const sumData = groupBy(totalData, 'year')
  // const xAxisArr = Object.keys(sumData)
  // let numSum: number[] = []
  // for (let key in sumData) {
  //   numSum.push(sumData[key].length)
  // }
  // let amountSum: number[] = []
  // for (let key in sumData) {
  //   amountSum.push(Math.floor(_sum(sumData[key].map((e) => e.amount))))
  // }
  // const Data = getMainOption(xAxisArr, numSum, amountSum)
  const Data = getMainOption(
    ['2021', '2022', '2023', '2024'],
    [1137, 1250, 1268, 1603],
    [1609.34, 1913.74, 1748.714086, 1132.352237]
  )
  new useEcharts(
    ChartLeft1.value!,
    Data,
    (data) => {
      console.log(data)
      detailActiveLabel.value = data.name
      initTable()
    },
    true
  )
}

const detailActiveLabel = ref('')
const initTable = () => {
  showTable.value = false
  showDialog.value = true
}
const colorList = ['#1FA8F5', '#73FBEA', '#FF772A', '#52D98B', '#F5F953']
const getMainOption = (xAxis: string[], data1: number[], data2: number[]): EChartsOption => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      ...defaultTooltipStyle
    },
    legend: {
      textStyle: {
        color: '#FFF', // 字体颜色
        fontSize: 12 // 字体大小
      },
      itemGap: 100, // 项间距
      data: ['项目数', '总投资数']
    },
    grid: {
      left: 50,
      right: 50,
      bottom: 20
    },
    xAxis: [
      {
        type: 'category',
        axisLabel: {
          color: '#FFF', // 字体颜色
          fontSize: 12, // 字体大小
          padding: [0, 0, 0, 0] // 与轴线的间距 [上, 右, 下, 左]
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        data: xAxis
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '项目数（个）',
        nameTextStyle: {
          color: '#7EB2E0', // 设置名称字体颜色
          fontSize: 14 // 设置名称字体大小
        },
        axisLabel: {
          color: '#7EB2E0', // 设置字体颜色
          fontSize: 14 // 设置字体大小
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#0A375D',
            width: 1 // 虚线宽度
          }
        }
      },
      {
        type: 'value',
        name: '总投资数（亿元）',
        nameTextStyle: {
          color: '#7EB2E0', // 设置名称字体颜色
          fontSize: 14 // 设置名称字体大小
        },
        axisLabel: {
          color: '#7EB2E0', // 设置字体颜色
          fontSize: 14 // 设置字体大小
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '项目数',
        type: 'bar',
        barWidth: 20,
        color: '#53BFF9',
        data: data1
      },
      {
        name: '总投资数',
        type: 'line',
        yAxisIndex: 1,
        symbol: 'circle',
        symbolSize: 12,
        lineStyle: {
          color: '#FF9330'
        },
        itemStyle: {
          color: '#FFF',
          borderColor: '#FF9330',
          borderWidth: 3
        },
        data: data2
      }
    ]
  }
}
onMounted(() => {
  initMainChart()
})
//弹窗内逻辑
const showTable = ref(false)
const initTableData = (showTableBoolean: boolean) => {
  showTable.value = showTableBoolean
  if (showTableBoolean) {
    boxTitle.value = '投资项目清单'
    initTableApi(2024)
  } else {
    boxTitle.value = '年度项目投资情况'
    setTimeout(() => {
      initDetail()
    }, 300)
  }
}

const initDetail = () => {
  const data1Value = [
    [97, 70, 74, 103, 93, 74, 80, 70, 110, 72, 99, 195],
    [118, 33, 122, 84, 135, 108, 97, 143, 128, 97, 105, 80],
    [58, 90, 109, 113, 117, 123, 126, 128, 97, 98, 90, 119],
    [130, 78, 112, 158, 153, 158, 140, 177, 178]
  ]
  const data2Value = [
    [96.05, 220.57, 19.55, 241.47, 104.59, 96.19, 165.05, 70.22, 216.66, 29.7, 137.77, 211.52],
    [175.98, 62.82, 241.72, 103.12, 287.55, 416.38, 93.75, 89.53, 118.52, 55.38, 60.11, 208.88],
    [
      87.737757, 157.793688, 76.529, 110.989366, 158.5864, 276.43565, 222.7868, 135.548927,
      142.111611, 186.868933, 40.106, 153.219954
    ],
    [222.455084, 94.857, 64.00052, 97.15249, 57.4825, 114.601583, 67.9691, 105.10716, 89.1468,72.86,146.72]
  ]
  const Data = getDetailOptions(data1Value, data2Value)
  new useEcharts(detailChartLeft1.value!, Data, (data) => {
    console.log(data.value)
  })
}

const detailChartLeft1 = ref<HTMLElement>()

const getDetailOptions = (data1: number[][], data2: number[][]): EChartsOption => {
  var clientWidth = detailChartLeft1.value!.clientWidth
  let xAxisArr: string[] = []
  for (let index = 0; index < 12; index++) {
    xAxisArr.push(index + 1 + '月')
  }

  const getSelect = () => {
    const arr = ['2021', '2022', '2023', '2024']
    const ans: any = {}
    arr.forEach((item) => {
      ans[item + '年项目数'] = detailActiveLabel.value == item
      ans[item + '年月投资额'] = detailActiveLabel.value == item
    })
    return ans
  }
  return {
    color: colorList,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      ...defaultTooltipStyle
    },
    legend: {
      top: 10,
      width: '55%',
      textStyle: {
        color: '#FFF', // 字体颜色
        fontSize: 12 // 字体大小
      },
      selected: getSelect()
    },
    grid: {
      left: 50,
      right: 80,
      bottom: 30,
      top: 80
    },
    xAxis: [
      {
        type: 'category',
        axisLabel: {
          color: '#FFF', // 字体颜色
          fontSize: 12, // 字体大小
          padding: [0, 0, 0, 0] // 与轴线的间距 [上, 右, 下, 左]
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        data: xAxisArr
      },
      {
        name: '项目金额',
        type: 'value',
        max: clientWidth,
        show: false
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '交易数（个）',
        nameTextStyle: {
          color: '#7EB2E0', // 设置名称字体颜色
          fontSize: 14 // 设置名称字体大小
        },
        axisLabel: {
          color: '#7EB2E0', // 设置字体颜色
          fontSize: 14 // 设置字体大小
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#0A375D',
            width: 2 // 虚线宽度
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      {
        type: 'value',
        name: '万元',
        nameTextStyle: {
          color: '#7EB2E0', // 设置名称字体颜色
          fontSize: 14 // 设置名称字体大小
        },
        axisLabel: {
          color: '#7EB2E0', // 设置字体颜色
          fontSize: 14 // 设置字体大小
        },
        splitLine: {
          show: false,
          lineStyle: {
            type: 'dashed',
            color: '#0A375D',
            width: 2 // 虚线宽度
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '2021年项目数',
        type: 'bar',
        barWidth: '12%',
        itemStyle: {
          //lenged文本
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0.5, color: colorList[0] },
              { offset: 1, color: 'transparent' }
            ],
            false
          )
        },
        data: data1[0]
      },
      {
        name: '2022年项目数',
        type: 'bar',
        barWidth: '12%',
        itemStyle: {
          //lenged文本
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0.5, color: colorList[1] },
              { offset: 1, color: 'transparent' }
            ],
            false
          )
        },
        data: data1[1]
      },
      {
        name: '2023年项目数',
        type: 'bar',
        barWidth: '12%',
        itemStyle: {
          //lenged文本
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0.5, color: colorList[2] },
              { offset: 1, color: 'transparent' }
            ],
            false
          )
        },
        data: data1[2]
      },
      {
        name: '2024年项目数',
        type: 'bar',
        barWidth: '12%',
        itemStyle: {
          //lenged文本
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0.5, color: colorList[3] },
              { offset: 1, color: 'transparent' }
            ],
            false
          )
        },
        data: data1[3]
      },
      // {
      //   name: '2024年项目数',
      //   type: 'bar',
      //   barWidth: '12%',
      //   itemStyle: {
      //     //lenged文本
      //     color: new echarts.graphic.LinearGradient(
      //       0,
      //       0,
      //       0,
      //       1,
      //       [
      //         { offset: 0.5, color: colorList[4] },
      //         { offset: 1, color: 'transparent' }
      //       ],
      //       false
      //     )
      //   },
      //   data: data1[4]
      // },
      {
        name: '2021年月投资额',
        type: 'line',
        xAxisIndex: 1,
        yAxisIndex: 1,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          color: colorList[0]
        },
        itemStyle: {
          color: '#FFF',
          borderColor: colorList[0],
          borderWidth: 3
        },
        data: data2[0].map((e, idx) => [18 + idx * 83.5, e])
      },
      {
        name: '2022年月投资额',
        type: 'line',
        xAxisIndex: 1,
        yAxisIndex: 1,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          color: colorList[1]
        },
        itemStyle: {
          color: '#FFF',
          borderColor: colorList[1],
          borderWidth: 3
        },
        data: data2[1].map((e, idx) => [30 + idx * 83.5, e])
      },
      {
        name: '2023年月投资额',
        type: 'line',
        xAxisIndex: 1,
        yAxisIndex: 1,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          color: colorList[2]
        },
        itemStyle: {
          color: '#FFF',
          borderColor: colorList[2],
          borderWidth: 3
        },
        data: data2[2].map((e, idx) => [42 + idx * 83.5, e])
      },
      {
        name: '2024年月投资额',
        type: 'line',
        xAxisIndex: 1,
        yAxisIndex: 1,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          color: colorList[3]
        },
        itemStyle: {
          color: '#FFF',
          borderColor: colorList[3],
          borderWidth: 3
        },
        data: data2[3].map((e, idx) => [54 + idx * 83.5, e])
      }
      // {
      //   name: '2024年月投资额',
      //   type: 'line',
      //   xAxisIndex: 1,
      //   yAxisIndex: 1,
      //   symbol: 'circle',
      //   symbolSize: 8,
      //   lineStyle: {
      //     color: colorList[4]
      //   },
      //   itemStyle: {
      //     color: '#FFF',
      //     borderColor: colorList[4],
      //     borderWidth: 3
      //   },
      //   data: data2[4].map((e, idx) => [66 + idx * 83.1, e])
      // }
    ]
  }
}

const tableData = ref<mountLetters[]>([])

const initTableApi = (idx: number) => {
  const devData = groupBy(totalData, 'year')
  if (devData[idx]) {
    tableData.value = devData[idx]
  } else {
    tableData.value = []
  }
}

const getYearLength = computed(() => {
  const time2020 = moment('2019-12-31', 'YYYY-MM-DD')
  const timeNow = moment()
  return timeNow.diff(time2020, 'years') + 1
})
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */

.btn-group {
  div {
    cursor: pointer;
    color: #fff;
    opacity: 0.5;
    // border: 1px solid #19afef;
    border-top: 1px solid #19afef;
    border-bottom: 1px solid #19afef;
    transition: all 0.2s;

    &:last-child {
      border-right: 1px solid #19afef;
    }

    &:first-child {
      border-left: 1px solid #19afef;
    }

    &:hover {
      opacity: 0.8;
    }
  }

  .btn-active {
    opacity: 1;
    background-color: #3f8ff6;
    color: #fff;
  }
}

.table {
  --el-table-tr-bg-color: #19aeef20;
  --el-table-header-bg-color: #0a577b;
  --el-fill-color-lighter: #0000;
  --el-table-header-text-color: #fff;
}
.step-pot {
  width: 10px;
  height: 10px;
  background-color: #6490b8;
  border-radius: 5px;
}
</style>
